<!-- 实名认证 -->
<template>
	<view class="container">
		<view class="cut"></view>
		<view class="name">
			<text :animation="animationData1">姓名</text>
			<input type="text" placeholder="请填写姓名" @input="onInput" @blur="onBlur" />
		</view>
		<view class="num">
			<text :animation="animationData2">身份证号码</text>
			<input type="idcard" placeholder="请填写身份证号码" maxlength="18" @input="onInputId" @blur="onBlurId" />
		</view>
		<text class="error" v-if="error">您所输入的姓名和身份证号码不一致，请重新输入。</text>

		<view class="uni-column">
			<view class="title bold">身份正面</view>
			<image class="image detailImg" :src="data.card_front" mode="" @tap="upload_img(4)"></image>
		</view>
		<view class="uni-column">
			<view class="title bold">身份证反面</view>
			<image class="image detailImg" :src="data.card_back" mode="" @tap="upload_img(5)"></image>
		</view>
		<text class="notice">注明:您所提供的以上信息将与公安系统互联，平台不会擅自泄露给第三方，请放心填写。</text>
		<view class="loginBtn" @tap="act&&certification()" :class="act? 'active' : ''">
			{{btnText}}
		</view>
		<view class="showModel" v-if="showModel">
			<view class="content-box">
				<text class="xxx" @tap="assisGo">X</text>
				<view class="title">{{showModelObj.title}}</view>
				<view class="msg">{{showModelObj.msg}}</view>
				<view class="btn-model" @tap="assisGo">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userVerify,
		userPromoterApply
	} from "@/api/user.js"
	import {
		channelBindSeller
	} from "@/api/merchant.js"
	import {
		baseUrl
	} from "@/api/api.js"
	import utils from '@/common/utils.js'
	// import { userSetUsercard } from '@/api/user.js'
	export default {
		data() {
			return {
				error: false,
				backurl: false,
				codeback: false,
				sgback: false,
				data: {
					real_name: "",
					idcard: "",
					phone: uni.getStorageSync("userInfo").phone,
					card_front: null,
					card_back: null,
				},
				baseUrl: baseUrl(),
				userInfo: uni.getStorageSync('userInfo'),
				idx: 0,
				animationData1: {},
				animationData2: {},
				back: false,
				btnText: '提  交',
				animation: null,
				showModel: false,
				showModelObj: {
					title: '申请成功',
					msg: '恭喜你成为推广小助手，接下来可以用二维码进行推广哦～',
				}
			};
		},
		created() {
			var animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'ease',
			})
			this.animation = animation
		},
		onLoad(options) {
			if (options.back) { //小助手
				this.back = true
				this.btnText = '提交申请'
			}
			if (options.codeback) { //小助手
				this.codeback = true
			}
			if (options.backurl) {
				this.backurl = true
			}
			if (options.sgback) {
				this.sgback = true
			}
			var animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'ease',
			})
			this.animation = animation
		},
		// watch: {
		// 	data: {
		// 		deep: true,
		// 		handler(val, oldval) {
		// 			this.blur()
		// 		}
		// 	}
		// },
		computed: {
			act() {
				let a = false
				if (this.error) {
					this.error = false
				}
				if (this.data.real_name) {
					this.animation.opacity(1).step()
					this.animationData1 = this.animation.export()
				} else {
					this.animation.opacity(0).step()
					this.animationData1 = this.animation.export()
				}
				if (this.data.idcard) {
					this.animation.opacity(1).step()
					this.animationData2 = this.animation.export()
				} else {
					this.animation.opacity(0).step()
					this.animationData2 = this.animation.export()

				}
				if (this.data.card_front && this.data.card_back && this.data.real_name && this.data.idcard) {
					a = true
				}
				return a
			}
		},
		methods: {
			upload_img(type, ind) {
				let _this = this;
				let token = uni.getStorageSync("Authori-zation");
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						uni.showLoading({
							mask:true,
							title: "上传中"
						})
						//因为有一张图片， 输出下标[0]， 直接输出地址
						var imgFiles = res.tempFilePaths[0]
						//#ifdef H5
						utils.imgCompress(imgFiles).then(re => {
							imgFiles = re
						//#endif
							uni.uploadFile({
								// 需要上传的地址
								url: _this.baseUrl + "/upload/image",
								header: {
									"Authori-zation": "Bearer " + token
								},
								// filePath  需要上传的文件
								filePath: imgFiles,
								name: "file",
								success(_res) {
									uni.hideLoading()
									if (_res.statusCode === 200) {
										var res = JSON.parse(_res.data);
										if (res.status === 200) {
											if (type == 4) {
												_this.data.card_front = res.data.url;
											} else if (type == 5) {
												_this.data.card_back = res.data.url;
											}
										} else {
											_this.$api.msg('上传失败，请检查图片大小')
										}
							
									} else {
										_this.$api.msg('网络异常')
									}
								}
							});
						//#ifdef H5	
						})
						//#endif
					}
				});
			},
			certification() {
				uni.showLoading({mask:true})
				userVerify({
					real_name: encodeURIComponent(this.data.real_name),
					idcard: this.data.idcard,
					phone: this.data.phone,
					card_front: this.data.card_front,
					card_back: this.data.card_back
				}).then(res => {
					this.error = false
					uni.hideLoading()
					if (res.data) {
						this.error = true
					} else {
						let info = uni.getStorageSync('userInfo')
						info.card_id = this.data.idcard
						info.real_name = this.data.real_name
						info.is_checked = 1
						uni.setStorageSync('userInfo', info)
						let _self = this
						uni.showModal({
							content: "认证成功",
							showCancel: false,
							success: function() {
								if (_self.back) {
									userPromoterApply({}).then(res => {
										if (res.status == 200) {
											_self.showModelObj.msg = res.msg;
											_self.showModel = true
										}
									})
									return
								}
								if (_self.codeback) {
									if (uni.getStorageSync('sid')) {
										channelBindSeller({
											seller_id: uni.getStorageSync('sid')
										}).then(re => {
											if (re.data) {
												uni.removeStorageSync("sid")
												uni.showModal({
													content: re.msg,
													showCancel: false,
													success(re) {
														if (re.confirm) {
															uni.reLaunch({
																url: "/pages/index/index"
															})
														}
													}
												})
											} else {
												uni.removeStorageSync("sid")
												//#ifdef H5
												if (uni.getStorageSync("QRCodeRout")) {
													uni.reLaunch({
														url: uni.getStorageSync("QRCodeRout").split("?")[0]
													})
													uni.removeStorageSync("QRCodeRout")
												} else {
													uni.reLaunch({
														url: "/pages/index/index"
													})
												}
												//#endif
												//#ifndef H5
												uni.navigateBack({})
												//#endif
											}
										})
									} else {
										//#ifdef H5
										if (uni.getStorageSync("QRCodeRout")) {
											uni.reLaunch({
												url: uni.getStorageSync("QRCodeRout")
											})
											uni.removeStorageSync("QRCodeRout")
										} else {
											uni.reLaunch({
												url: "/pages/index/index"
											})
										}
										//#endif
										//#ifndef H5
										uni.navigateBack({})
										//#endif
									}
									return
								}
								if (_self.sgback) {
									if (!uni.getStorageSync("userInfo").is_bind_bank) {
										uni.redirectTo({
											url: "/pages/center/accountSet/bank/addBank?backurl=true"
										})
										return
									} else {
										uni.navigateBack({

										})
									}
								}
								if (_self.backurl) {
									if (!uni.getStorageSync("userInfo").is_bind_bank) {
										uni.redirectTo({
											url: "/pages/center/accountSet/bank/addBank?backurl=true"
										})
										return
									} else if (!uni.getStorageSync("userInfo").withdraw_pass) {
										uni.redirectTo({
											url: "/pages/center/accountSet/payPassword/payPassword?backurl=true"
										})
										return
									} else {
										uni.navigateBack({

										})
									}

								} else {
									uni.redirectTo({
										url: "/pages/center/accountSet/certification/success?status=1"
									})
								}
							}
						})
					}
				})
			},
			assisGo() {
				this.showModel = false;
				return setTimeout(() => {
					uni.navigateTo({
						url: `/pages/center/assistant/assistant`
					})
				}, 500)
			},
			onInput(e) {
				this.data.real_name = e.target.value
			},
			onInputId(e) {
				this.data.idcard = e.target.value
			},
			onBlur(e) {
				this.data.real_name = e.target.value
			},
			onBlurId(e) {
				this.data.card_id = e.target.value
			},
			blur() {
				if (this.error) {
					this.error = false
				}
				if (this.data.real_name) {
					this.animation.opacity(1).step()
					this.animationData1 = this.animation.export()
				} else {
					this.animation.opacity(0).step()
					this.animationData1 = this.animation.export()
				}
				if (this.data.idcard) {
					this.animation.opacity(1).step()
					this.animationData2 = this.animation.export()
				} else {
					this.animation.opacity(0).step()
					this.animationData2 = this.animation.export()

				}
			}
		},


	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 60rpx;

		.cut {
			margin-left: -60rpx;
			width: 750rpx;
			height: 20rpx;
			background-color: #eee;
		}

		.name {
			height: 50rpx;
			border-bottom: 1rpx solid rgba(220, 220, 220, 1);
			margin-top: 76rpx;
			padding: 14rpx;
			font-size: 32rpx;
			position: relative;

			text {
				position: absolute;
				opacity: 0;
				top: -30rpx;
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
			}
		}

		.num {
			height: 50rpx;
			border-bottom: 1rpx solid rgba(220, 220, 220, 1);
			margin-top: 76rpx;
			padding: 14rpx;
			font-size: 32rpx;
			position: relative;

			text {
				position: absolute;
				opacity: 0;
				top: -30rpx;
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
			}

			image {
				position: absolute;
				width: 44rpx;
				height: 44rpx;
				right: 0;
				top: 17rpx;
			}
		}

		.error {
			display: block;
			font-size: 24rpx;
			color: #DD524D;
		}

		.notice {
			display: block;
			margin-top: 70rpx;
			font-size: 24rpx;
			color: #DD524D;
		}

		.uni-column {
			padding-top: 24rpx;
			position: relative;

			.title {
				font-size: 28rpx;
				line-height: 60rpx;
			}

			.bold {
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}

			.cell-more {
				position: absolute;
				right: 10rpx;
				bottom: 5rpx;
				color: #e5e5e5;
			}

			.cell-more-per {
				position: absolute;
				right: 10rpx;
				top: 88rpx;
			}

			.label {
				color: red;
				font-size: 20rpx;
				bottom: -50rpx;
			}

			.uni-input {
				height: 50rpx;
				line-height: 50rpx;
				border-bottom: 1rpx solid #f5f5f5;
			}

			.timeBox {
				display: flex;
				justify-content: space-between;

				.time {
					width: 250rpx;
				}

				text {
					color: #999;
				}
			}

			.image {
				background: url(../../../../static/images/public/imgUpload.png) no-repeat center center;
				background-size: 90rpx 90rpx;
				border-radius: 10rpx;
				border: 1px solid rgba(238, 238, 238, 1);
			}

			.logo {
				width: 250rpx;
				height: 250rpx;
			}

			.headImg {
				width: 250rpx;
				height: 250rpx;
			}

			.detailImg {
				width: 630rpx;
				height: 300rpx;
			}

		}

		.loginBtn {
			// position: fixed;
			// left: 75rpx;
			// bottom: 60rpx;
			margin: 60rpx 0;
			width: 600rpx;
			height: 80rpx;
			border-radius: 40px;
			background: rgba(220, 220, 220, 1);
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			color: #ffffff;
			font-size: 32rpx;
			font-weight: bold;
		}


		.active {
			background-color: $theme-color;
		}

		.showModel {
			background: rgba(0, 0, 0, .2);
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9;
			overflow: hidden;

			.content-box {
				text-align: center;
				border-radius: 10rpx;
				width: 70%;
				height: 400rpx;
				background-color: #fff;
				margin: 500rpx auto;
				position: relative;
				z-index: 99;
				color: black;
				color: #333;
			}

			.xxx {
				position: absolute;
				top: 22rpx;
				right: 22rpx;

			}

			.title {
				padding-top: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
			}

			.msg {
				width: 66%;
				margin: 45rpx auto 0;
				font-size: 24rpx;
				line-height: 40rpx;
			}

			.btn-model {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #57BE6A;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
				font-weight: 500;
				border-radius: 40rpx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 30rpx;
				margin: auto;
			}

		}
	}
</style>
